<template>
  <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4 text-gray-800">输入法演示</h2>
    <div class="mb-4">
      <label for="input" class="block text-sm font-medium text-gray-700 mb-2">输入框：</label>
      <input
        id="input"
        v-model="inputValue"
        @input="handleInput"
        @compositionstart="handleCompositionStart"
        @compositionupdate="handleCompositionUpdate"
        @compositionend="handleCompositionEnd"
        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        placeholder="请输入文字..."
      />
    </div>
    <div class="space-y-2">
      <p class="text-sm text-gray-600">
        当前输入：<span class="font-medium text-gray-800">{{ currentInput }}</span>
      </p>
      <p class="text-sm text-gray-600">
        组合状态：<span class="font-medium text-gray-800">{{ isComposing ? '输入中' : '已完成' }}</span>
      </p>
      <p class="text-sm text-gray-600">
        确认输入：<span class="font-medium text-gray-800">{{ confirmedInput }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const inputValue = ref('')
const currentInput = ref('')
const confirmedInput = ref('')
const isComposing = ref(false)

const handleInput = (event) => {
  if (!isComposing.value) {
    currentInput.value = event.target.value
    confirmedInput.value = event.target.value
  }
}

const handleCompositionStart = (event) => {
  isComposing.value = true
  console.log('Composition start:', event.data)
}

const handleCompositionUpdate = (event) => {
  currentInput.value = event.data
  console.log('Composition update:', event.data)
}

const handleCompositionEnd = (event) => {
  isComposing.value = false
  currentInput.value = event.data
  confirmedInput.value = inputValue.value
  console.log('Composition end:', event.data)
}
</script>